<template>
  <transition name="slide-fade">
    <div class="content" v-show='showBool'>
      <div class="no-data">
        <img src="../assets/img/nodata.png" alt="">
        <div class="desc">{{desc}}</div>
      </div>
    </div>
  </transition>
</template>
<script>
  import i18n from '@/i18n';
  export default {
    name: 'zx-no-data',
    props: {
      value: Boolean,
      desc: {
        default: i18n.t('NODATA'),
        type: String
      }
    },
    data() {
      return {
        showBool: this.value
      };
    },
    watch: {
      value(val) {
        this.showBool = val;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .no-data {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .desc {
    font-size: 1.2rem;
    margin-top: 1rem;
    color: #4d4f51;
  }

  .slide-fade-enter-active,
  .slide-fade-leave-active {
    transition: all 0.2s ease-in-out;
  }

  .slide-toggle-enter-active,
  .slide-toggle-leave-active {
    /* transition: all 0.3s cubic-bezier(1.0, 0.2, 0.8, 1.0); */
    transition: all 0.2s ease-in-out;

  }

  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateY(10px);
    opacity: 0;
  }
</style>